<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>CascadeMenu</title>
        <link href="../css/qs.css" rel="stylesheet" type="text/css"/>
		<link href="../css/qs_ui.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/util.js" type="text/javascript"></script>
	</head>
<body>
	<div id="menu" style="float:left; width:400px;height:500px"></div>
	<div id="chartmenu" style="float:left; width:400px;height:500px"></div>
	<script>
    var data = [{
        txt: "class1",
        type: "",
        subMenu: [{
            txt: "class11",
            type: "",
			subMenu:[{
				txt:"ratio",
				type:"",
				renderer:function(container){
					 var t1 = new Util.ButtonGroup(container, [{txt:"r1",val:1},{txt:"r2",val:2}], {
						onClick: function(v){
					  	}
					},{vertical:true})
				}
			}
			]
        }, {type:"separator"},{
            txt: "class12",
            type: "",
            subMenu: [{
                txt: "class121",
                type: "ratio",
                selectable: true
            }, {
                txt: "class122",
                type: "ratio",
                selectable: true
            }, {
                txt: "class123",
                type: "ratio",
                selectable: true
            }]
        }]
	    }, {type:"separator"}, {
	        txt: "hide tap",
	        type: "switch",
	        selectable: true,
	        sTxt: ["show tap", "hide tap"]
	    }, {
	        txt: "class2",
	        subMenu: [{
	            txt: "class21",
	            type: "checkbox",
	            selectable: true
	        }, {
	            txt: "class22",
	            type: "checkbox",
	            selectable: true
	        }]
	    }];
	    var menu = new Util.CascadeMenu($("#menu"), {}, data, function(data,f){
	        var t = "";
	        for (var o in data) {
	            t += data[o] + "|";
	        }
	        alert(t);
	    });
		var chartData = [{
			txt:"ChartType",
			type:"",
			selectable: false,
			subMenu:[{
				txt:"Line",
				val:"lines",
				type: "ratio"
			},{
				txt:"OHLC",
				val:"ohlc",
				type: "ratio"
			},{
				txt:"Candlestick",
				val:"candle",
				type: "ratio"
			}]
		},{
			txt:"ChartCursor",
			type:"",
			selectable: false,
            subMenu: [{
                txt: "Track Ball",
                val: "0",
				type: "ratio"
            }, {
                txt: "Crosshair",
                val: "1",
				type: "ratio"
            }, {
                txt: "Off",
                val: "3",
				type: "ratio"
            }]	
		},{
			txt:"Frequency",
			type:"",
			selectable: false
		},{
			txt:"Zoom",
			type:"",
			selectable: false,
            subMenu: [{
                txt: "1 Day",
                val: "1",
				type: "ratio",
				subMenu:[{
					txt: "1 Minute",
	                val: "minute",
					type: "ratio",
				},{
					txt: "5 Minutes",
	                val: "minute5",
					type: "ratio",
				},{
					txt: "15 Minutes",
	                val: "minute15",
					type: "ratio",
				},{
					txt: "30 Minutes",
	                val: "minute35",
					type: "ratio",
				}]
            }, {
                txt: "5 Days",
                val: "2",
				type: "ratio",
				subMenu:[{
					txt: "1 Minute",
	                val: "minute",
					type: "ratio",
				},{
					txt: "5 Minutes",
	                val: "minute5",
					type: "ratio",
				},{
					txt: "15 Minutes",
	                val: "minute15",
					type: "ratio",
				},{
					txt: "30 Minutes",
	                val: "minute35",
					type: "ratio",
				}]
            }, {
                txt: "1 Month",
                val: "3",
				type: "ratio",
				subMenu:[{
					txt: "Daily",
	                val: "d",
					type: "ratio",
				},{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				}]
            }, {
                txt: "3 Months",
                val: "4",
				type: "ratio",
				subMenu:[{
					txt: "Daily",
	                val: "d",
					type: "ratio",
				},{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				}]
            }, {
                txt: "YTD",
                val: "5",
				type: "ratio",
				subMenu:[{
					txt: "Daily",
	                val: "d",
					type: "ratio",
				},{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				}]
            }, {
                txt: "1 Year",
                val: "6",
				type: "ratio",
				subMenu:[{
					txt: "Daily",
	                val: "d",
					type: "ratio",
				},{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }, {
                txt: "3 Years",
                val: "7",
				type: "ratio",
				subMenu:[{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }, {
                txt: "5 Years",
                val: "8",
				type: "ratio",
				subMenu:[{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }, {
                txt: "10 Years",
                val: "9",
				type: "ratio",
				subMenu:[{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }, {
                txt: "Maximum",
                val: "10",
				type: "ratio",
				subMenu:[{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }, {
                txt: "Custom",
                val: "11",
				type: "ratio",
				subMenu:[{
					txt: "Weekly",
	                val: "w",
					type: "ratio",
				},{
					txt: "Monthly",
	                val: "m",
					type: "ratio",
				}]
            }]
		},{
			txt:"Event",
			type:"",
			selectable: false,
			subMenu:[{
				txt:"Dividend",
				val:"dividend",
				type:"checkbox",
				checked:false
			},{
				txt:"Splits",
				val:"splits",
				type:"checkbox",
				checked:false
			},{
				txt:"Earnings",
				val:"earnings",
				type:"checkbox",
				checked:false
			}]
		}
		]		
		var chartMenu = new Util.CascadeMenu($("#chartmenu"),{},chartData,function(data,f){
			var d = data.data, str="";
			for(var o in d){
				str+=d[o]+"|";
			}
			console.log(str);
		})
	</script>
	</body>
</html>
